﻿@{
    ViewData["Title"] = "新建表";
}
<div class="layui-layout layui-layout-admin">
    <form class="layui-form" action="" lay-filter="val-filter">
        <div class="layui-form-item">
            <label class="layui-form-label">表名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="configId" value="1300000000001" />
                <input type="text" name="tableName" autocomplete="off" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <table class="layui-hide" id="lsttable"></table>
                <script type="text/html" id="tplYesNo">
                    <button class="layui-btn layui-btn-primary dropdpwn-demo">
                      <span data-filed="{{d.LAY_COL.field}}">{{= d.isPrimarykey==1?'是':'否' }}</span>
                      <i class="layui-icon layui-icon-down layui-font-12"></i>
                    </button>
                </script>
                <script type="text/html" id="tpldataType">
                    <button class="layui-btn layui-btn-primary dropdpwn-dataType">
                      <span>{{= d.dataType }}</span>
                      <i class="layui-icon layui-icon-down layui-font-12"></i>
                    </button>
                </script>
                <div style="padding-top:4px">
                    <button id="btnAddKey" type="button" class="layui-btn layui-btn-sm">新增主键字段</button>
                    <button id="btnAdd" type="button" class="layui-btn layui-btn-sm">新增普通字段</button>
                    <button id="btnAddTenant" type="button" class="layui-btn layui-btn-sm">新增租户字段</button>
                    <button id="btnAddBase" type="button" class="layui-btn layui-btn-sm">新增基础字段</button>
                </div>
            </div>
        </div>
    </form>
</div>

@section scripts {
    <script type="text/javascript">
        var app = {};
        layui.use(['http', 'toast'], function () {
            var $ = layui.$, form = layui.form, table = layui.table, dropdown = layui.dropdown,
                http = layui.http, toast = layui.toast;
            //
            app.init = function () {
                let data = app.data || {};
                form.val('val-filter', data);

                table.render({
                    elem: '#lsttable',
                    cols: [[ //标题栏
                        { field: 'LAY_NUM', title: '序号', width: 40 },
                        { field: 'dbColumnName', title: '列名', width: 160, edit: 'text' },
                        { field: 'columnDescription', title: '描述', width: 160, edit: 'text' },
                        { field: 'dataType', title: '类型', width: 140, templet: '#tpldataType' },
                        { field: 'isPrimarykey', title: '主键', width: 110, templet: '#tplYesNo' },
                        { field: 'isIdentity', title: '自增', width: 110, templet: '#tplYesNo' },
                        { field: 'isNullable', title: '可空', width: 110, templet: '#tplYesNo' },
                        { field: 'length', title: '长度', width: 80, edit: 'text' },
                        { field: 'decimalDigits', title: '精度', width: 80, edit: 'text' },
                        { field: 'defaultValue', title: '默认值', width: 100, edit: 'text' },
                    ]],
                    css: [
                        '.layui-table-cell{height: 50px; line-height: 40px;}'
                    ].join(''),
                    data: [],
                    done: function (res, curr, count) {
                        var options = this;
                        // 获取当前行数据
                        table.getRowData = function (tableId, elem) {
                            var index = $(elem).closest('tr').data('index');
                            return table.cache[tableId][index] || {};
                        };
                        //是否 dropdown 方式的下拉选择
                        dropdown.render({
                            elem: '.dropdpwn-demo',
                            data: [{ title: '否', id: 0 }, { title: '是', id: 1 }],
                            click: function (obj) {
                                var data = table.getRowData(options.id, this.elem);
                                var span = this.elem.find('span')
                                span.html(obj.title);
                                data[span.attr('data-filed')] = obj.id;
                            }
                        });
                        // 数据类型
                        dropdown.render({
                            elem: '.dropdpwn-dataType',
                            data: [
                                { id: 'text', title: 'text' },
                                { id: 'varchar', title: 'varchar' },
                                { id: 'nvarchar', title: 'nvarchar' },
                                { id: 'char', title: 'char' },
                                { id: 'nchar', title: 'nchar' },
                                { id: 'timestamp', title: 'timestamp' },
                                { id: 'int', title: 'int' },
                                { id: 'smallint', title: 'smallint' },
                                { id: 'tinyint', title: 'tinyint' },
                                { id: 'bigint', title: 'bigint' },
                                { id: 'bit', title: 'bit' },
                                { id: 'decimal', title: 'decimal' },
                                { id: 'datetime', title: 'datetime' },
                                { id: 'date', title: 'date' },
                                { id: 'blob', title: 'blob' },
                                { id: 'clob', title: 'clob' }
                            ],
                            click: function (obj) {
                                var data = table.getRowData(options.id, this.elem);
                                var span = this.elem.find('span')
                                span.html(obj.title);
                                data.dataType = obj.id;
                            }
                        });
                    }
                });
                //添加主键
                $('#btnAddKey').on('click', function () {
                    let data = table.getData('lsttable');
                    data.push({ dbColumnName: 'Id', columnDescription: '主键Id', dataType: 'bigint', isPrimarykey: 1, isIdentity: 0, isNullable: 0, length: 0, decimalDigits: 0 });
                    table.reload('lsttable', { data: data })
                })
                //添加租户Id
                $('#btnAddTenant').on('click', function () {
                    let data = table.getData('lsttable');
                    data.push({ dbColumnName: 'TenantId', columnDescription: '租户Id', dataType: 'bigint', isPrimarykey: 0, isIdentity: 0, isNullable: 1, length: 0, decimalDigits: 0 });
                    table.reload('lsttable', { data: data })
                })
                //添加基础字段
                $('#btnAddBase').on('click', function () {
                    let data = table.getData('lsttable');
                    data.push({ dbColumnName: 'CreateTime', columnDescription: '创建时间', dataType: 'datetime', isPrimarykey: 0, isIdentity: 0, isNullable: 1, length: 0, decimalDigits: 0 });
                    data.push({ dbColumnName: 'CreateUserId', columnDescription: '创建者Id', dataType: 'bigint', isPrimarykey: 0, isIdentity: 0, isNullable: 1, length: 0, decimalDigits: 0 });
                    data.push({ dbColumnName: 'CreateUserName', columnDescription: '创建者姓名', dataType: 'varchar', isPrimarykey: 0, isIdentity: 0, isNullable: 1, length: 64, decimalDigits: 0 });
                    data.push({ dbColumnName: 'UpdateTime', columnDescription: '更新时间', dataType: 'datetime', isPrimarykey: 0, isIdentity: 0, isNullable: 1, length: 0, decimalDigits: 0 });
                    data.push({ dbColumnName: 'UpdateUserId', columnDescription: '修改者Id', dataType: 'bigint', isPrimarykey: 0, isIdentity: 0, isNullable: 1, length: 0, decimalDigits: 0 });
                    data.push({ dbColumnName: 'UpdateUserName', columnDescription: '修改者姓名', dataType: 'varchar', isPrimarykey: 0, isIdentity: 0, isNullable: 1, length: 64, decimalDigits: 0 });
                    data.push({ dbColumnName: 'IsDelete', columnDescription: '软删除', dataType: 'bit', isPrimarykey: 0, isIdentity: 0, isNullable: 1, length: 0, decimalDigits: 0 });
                    table.reload('lsttable', { data: data })
                })
                //普通字段
                $('#btnAdd').on('click', function () {
                    let data = table.getData('lsttable');
                    data.push({});
                    table.reload('lsttable', { data: data })
                })
            }();
            app.save = function () {
                form.submit('val-filter', function (data) {
                    var postData = data.field
                    postData.dbColumnInfoList = table.getData('lsttable');                  
                    //
                    http.post('/api/sysDatabase/addTable', postData).then((res) => {
                        if (res.code == 200) {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.app.loadTables();
                            toast.success({ message: '保存成功！' });
                        }
                        else {
                            layer.alert('保存失败，错误信息:' + res.message, { icon: 2 });
                        }
                    });

                    return false;
                });
            }
        })
    </script>
}
